Vue中使用vue

您所在的位置：网站首页 › vue mainjs中引入js › Vue中使用vue

Vue中使用vue

#Vue中使用vue| 来源: 网络整理| 查看: 265

场景

Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)：

Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_海康威视摄像头m3u8

上面实现的使用Video.js播放m3u8格式的视频流文件。

如果要在vue中直接播放rtmp视频流文件怎么办。

注：

博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,架构之路,SpringBoot领域博主关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。

实现

1、安装插件

npm install vue-video-player --save

npm install --save videojs-flash

这里要注意网络上有说如下安装方式的

npm install video-flash --save

这种方式会报错找不到，完整应该是videojs-flash

2、在页面中引用

//videojs-flash必须要放在vue-video-player的后面 import 'video.js/dist/video-js.css' import { videoPlayer } from 'vue-video-player' import 'videojs-flash'

这里特别注意：

引用时必须注意videojs-flash必须要放在vue-video-player的后面

3、页面中引入videoPlayer组件

export default { name: "rtmpPlay", components: { videoPlayer },

4、页面上添加videoPlay组件

5、设置组件的设置属性

data() { return { playerOptions: { width: "800", height: "400", language: 'zh-CN', techOrder: ['flash'], muted: true, autoplay: true, controls: false,//不显示暂停、声音、进度条组件 loop: true, sources: [{ type: 'rtmp/mp4', src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //网络rtmp流地址 //src: 'rtmp://127.0.0.1:8822/live/badao' //本地rtmp流地址 }], } }; },

这里通过controls: false,//不显示暂停、声音、进度条组件

6、完整页面代码

//videojs-flash必须要放在vue-video-player的后面 import 'video.js/dist/video-js.css' import { videoPlayer } from 'vue-video-player' import 'videojs-flash' export default { name: "rtmpPlay", components: { videoPlayer }, data() { return { playerOptions: { width: "800", height: "400", language: 'zh-CN', techOrder: ['flash'], muted: true, autoplay: true, controls: false,//不显示暂停、声音、进度条组件 loop: true, sources: [{ type: 'rtmp/mp4', src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //网络rtmp流地址 //src: 'rtmp://127.0.0.1:8822/live/badao' //本地rtmp流地址 }], } }; }, mounted() { }, methods: { }, };

7、注意这里的rtmp视频流地址

src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //网络rtmp流地址

该地址是网络地址，运行效果

src: 'rtmp://127.0.0.1:8822/live/badao' //本地rtmp流地址

这个是本地搭建的视频推流的实现，可以参考如下

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流：

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_BADAO_LIUMANG_QIZHI的博客-CSDN博客_nginx rtmp windows

本地src的效果

8、注意这里只有支持并且下载了flash才能播放视频，这里使用的360极速浏览器并安装flash，重启浏览器之后就可以播放了。但是如果是Chrome浏览器则会提示

9、还要注意网络上有说vue-video-player同时安装时也会不播放的问题，所以如果之前已经安装了Video.js需要先将其删除卸载掉。

【本文地址】

Vue中使用vue

Vue中使用vue

今日新闻

推荐新闻